<template>
  <div class="handleLog">
    <section>
      <el-row :gutter="20" class="header">
        <el-col :span="5">
          组别：
          <el-select v-model="iterms.kfGroup.value" clearable placeholder="请选择组别" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.kfGroup.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          操作员：
          <el-select v-model="iterms.handlerPer.value" clearable placeholder="请选择状态" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.handlerPer.options" :key="item.id" :label="item.UserName" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          模块名称：
          <el-select v-model="iterms.modelName.value" clearable placeholder="请选择模块名称" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.modelName.options" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          操作描述：
          <el-select v-model="iterms.handleMsg.value" clearable placeholder="请选择操作描述：" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.handleMsg.options" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="header">
        <el-col :span="5">
          时间段：
          <el-date-picker
            v-model="iterms.dateDur"
            type="daterange"
            @change="handleCurrentChange(1)"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-col>
        <el-col :span="5" v-if="type === 'cusMon'">
          操作类型：
          <el-select v-model="iterms.modelType.value" clearable placeholder="请选择操作类型" @change="handleCurrentChange(1)">
            <el-option v-for="item in iterms.modelType.options" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2" :push="10">
          <el-button type="primary" @click="handleCurrentChange(1)">搜索</el-button>
        </el-col>
      </el-row>
      <div class="listBox">
        <table class="list">
          <tr>
            <th v-for="item in list.titles"
              :key="item.label"
              :style="`width:${item.width};`"
              v-text="item.label"
            ></th>
          </tr>
          <tr v-for="(item,index) in list.tableData" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.group}}</td>
            <td>{{item.kfmc}}</td>
            <td>{{item.czsj}}</td>
            <td>{{item.mkmc}}</td>
            <td v-if="type === 'cusMon'">{{item.czlx}}</td>
            <td>{{item.czms}}</td>
            <td>{{item.IP}}</td>
          </tr>
          <tr v-if="list.tableData.length === 0" >
            <td :colspan="list.titles.length">
              暂无数据
            </td>
          </tr>
        </table>
        <div class="pager">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-size="list.pageSize"
            layout="prev, pager, next, jumper"
            :current-page="list.page"
            :total="list.total">
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { dateFormat } from 'vux'

export default {
  name: 'daida',
  data() {
    let titles = [
      {
        label: '序号',
        width: '5%',
      },
      {
        label: '组别',
        width: '8%',
      },
      {
        label: '操作员',
        width: '8%',
      },
      {
        label: '操作时间',
        width: '10%',
      },
      {
        label: '模块名称',
        width: '10%',
      },
      {
        label: '操作类型',
        width: '15%',
      },
      {
        label: '操作描述',
        width: '15%',
      },
      {
        label: 'IP',
        width: '15%',
      },
    ]
    const kfs = this.$store.getters.getKf
    return {
      // 筛选项
      iterms:{
        kfGroup:{
          value:'',
          options:[
            {value:104,label:'业务组'},
            {value:100,label:'答疑组'},
            {value:112,label:'回访组'},
          ]
        },
        handlerPer:{
          value:'',
          options:kfs
        },
        handleMsg:{
          value:'',
          options:[
            '会员列表',
            '基本信息',
            '资金记录',
            '联系记录',
            '投标记录',
            '体验金记录',
            '商品兑换记录',
            '奖励选择查询',
            '奖励记录查询',
            '奖励记录查询',
            '充值记录',
            '积分记录',
            '银行流水',
            '复投加息',
            '红包',
            '现金券',
            '加息券',
            'VIP等级成长',
            '登录',
            '退出',
          ]
        },
        modelName:{
          value:'',
          options:[
            '通话记录',
            '回访记录',
            '质检列表',
            '会员列表',
            '回款列表',
            '任务待打款列表',
          ]
        },
        modelType:{
          value:'',
          options:[
            '查询',
            '登录',
            '退出',
          ]
        },
        dateDur:''
      },
      // 列表
      list: {
        page: 1,
        pageSize: 20,
        total: 0,
        titles,
        tableData: []
      },
    }
  },
  props:{
    type:String
  },
  computed:{
    cuUserInfo(){
      return this.$store.getters.getUserInfo
    },
  },
  watch: {
  },
  mounted() {
    // 获取数据
    this.getList()
  },
  methods: {
    handleCurrentChange(page) {
      this.list.page = page
      //
      this.getList()
    },
    // 获取列表数据
    async getList(){
      const {pageSize,page} = this.list
      const {kfGroup,handlerPer,handleMsg,modelName,modelType,dateDur} = this.iterms
      try{
        const {data} = await this.$get(this,{
          api:'member/loadKfLog.do',
          data:{
            groupid: kfGroup.value,
            fuid: handlerPer.value,
            czms:handleMsg.value,
            mkmc:modelName.value,
            czlx:modelType.value,
            st:dateDur && dateDur[0] && dateFormat(dateDur[0],'YYYY-MM-DD'),
            et:dateDur && dateDur[1] && dateFormat(dateDur[1],'YYYY-MM-DD'),
            page,
            pageSize
          }
        })
        if(data.state === 0){
          if(page === 1){
            this.list.total = data.content.num
          }
          this.list.tableData = data.content.data
          return
        }
        this.$warn('接口member/loadKfLog.do返回的异常信息:' + data.message)
      }catch(e){
        console.warn('接口member/loadKfLog.do:',e.message)
        this.$warn('接口member/loadKfLog.do执行出错')
      }
    },
  }
}

</script>

<style lang="scss" scoped>
$bdColor: #bfcbd9;
.handleLog {
  background: #fff;
}
.listBox{
  margin-top:20px;
}
.header{
  padding:20px;
}
.red{
  cursor:pointer;
  color:#FF4949;
}
.blue{
  cursor:pointer;
  color:#20A0FF;
}
.list{
  width:100%;
  margin-bottom:8px;
  text-align:center;
  border-left:1px solid $bdColor;
  border-top:1px solid $bdColor;
  font-size:14px;
  th,td{
    line-height:40px;
    border-right:1px solid $bdColor;
    border-bottom:1px solid $bdColor;
  }
}
// dialog
.select{
  width:100%;
}
.year{
  width:100%;
}
.level{
  width:90%;
}
.tc{
  text-align:center;
}
</style>
